/**
 * 类组件：setState()=> 父类Component
 * 作用：1. 修改state的数据 2. 刷新页面
 * 特点：异步的（共同点）
 * 语法：
 * 1. setState({key:newVal}) =》多次执行，只执行最后一次
 * 2. setState(func:回调) =》多次执行 =》累加（全部执行）
 */
import React, { Component } from 'react'

class Index extends Component {

  state = {
    count: 0
  }

  // 点击自加
  // 使用对象语法
  handlerObj = () => {
    // 异步问题
    this.setState({
      // key:val
      count: this.state.count + 1
    }, () => {
      console.log('最新的值1：', this.state.count)
    })
    // 旧值=》错误的
    console.log('上一次的值：', this.state.count)

    // 多次执行=》执行最后一次
    this.setState({
      count: this.state.count + 2
    }, () => {
      console.log('最新的值2：', this.state.count)
    })

    this.setState({
      count: this.state.count + 3
    }, () => {
      console.log('最新的值3：', this.state.count)
    })

  }

  // 使用函数语法
  handlerFn = () => {
    // 基本用法=》异步
    /**
     * callback: state 最新的state props 最新
     */
    this.setState((state, props) => {
      // 返回的对象：包含要修改的state数据
      return {
        count: state.count + 1
      }
    }, () => {
      console.log('函数语法获取最新的值1：', this.state.count)
    })
    console.log('函数语法：', this.state.count)

    // 多次执行=》会累加
    this.setState((state, props) => {
      // 返回的对象：包含要修改的state数据
      return {
        count: state.count + 2
      }
    }, () => {
      console.log('函数语法获取最新的值2：', this.state.count)
    })
    this.setState((state, props) => {
      // 返回的对象：包含要修改的state数据
      return {
        count: state.count + 10
      }
    }, () => {
      console.log('函数语法获取最新的值3：', this.state.count)
    })
  }


  render () {
    return (
      <div>
        <h1>setState高级</h1>
        <p>{this.state.count}</p>
        <button onClick={this.handlerObj}>对象语法</button>
        <button onClick={this.handlerFn}>函数语法</button>
      </div>
    )
  }
}

export default Index
